<template>
<div>
	<search v-on:getQueryKeyword="catchQueryKeyword"></search>
	<div class="filtrateTab border-bottom-1px">
		<div class="filtrate-tab-item" v-for="(item, index) in tabParams" @click="showDrop(index,true)" v-bind:class="{'active':isAcitve==index}" >
            <span>{{item}}<i class="mint-cell-allow-donw"></i></span>
        </div>
	</div>
    <div class="drop" v-show="dropShow">
        <div class="mask-black" @click="showDrop(null,false)"></div>
        <ul>
        	<li v-for="(item, index) in showDrorams" class="dropitem border-bottom-1px" v-bind:class="{'active':filterKey[isAcitve] === item}" @click="filtrate(item,index)">{{item}}</li>
        </ul>
    </div>

    <div class="catlist-wrapper">
        <div class="loading-container" v-show="!proList.length">
            <loading :desc="loadingDesc" :showimg="loadingShowimg"></loading>
        </div>

        <!-- content -->
	  <div class="parts-list list-wrapper-hook" ref="partsw">
	    <div>
	      <!-- 列表 -->
	      <div class="page-cell">
                <a :href="'./catdetails.html?ptype=catMicrogridDetail&id=' + item.id" class="border-bottom-1px mint-cell" v-if="proList.length"
                   v-for="item in proList">
                    <span class="mint-cell-mask"></span>
                    <div class="mint-cell-con">
                        <img @load="loadImage" v-lazy="item.photo" class="part-img">
                        <span class="mint-cell-text">
                                <strong>型号：{{item.model}}</strong>
                                <span>产品分类：{{item.productCategory}}</span>
                                <span>品      牌：{{item.brand}}</span>
                                <span>功率：{{item.power}}</span>
                         </span>
                    </div>
                </a>                
            </div>
	      <!-- 
	        1、底部提示信息 
	        2、这里有一种情况,就是没有更多数据时,这里的文本应该显示"暂无更多数据"
	      -->
	      <div class="bottom-tip" v-show="proList.length">
	        <span class="loading-hook">{{bottomTip}}</span>
	      </div>
	    </div>
	  </div>
	  <!-- content end  -->
    </div>

</div>
</template>
<script type="text/ecmascript-6">
	import Search from 'components/search/search';
	import Loading from 'components/loading/loading';
	import BScroll from 'better-scroll';
	import apiUrl from '../../../config/api';
	import basejs from 'common/js/base.js';
	import axios from 'axios';
    var tempArr = ['产品分类'];
	export default {
		data() {
			return {
				loadingDesc: '正在载入...',
				loadingShowimg: true,
				filterKey: [""],
				topTip: '下拉刷新',
				bottomTip: '查看更多',
				pageSize: 10,
				pageIndex: 1,
				pageCount: 0,
				proList: [], // 展现数据

				isAcitve: null,

				tabParams: ['产品分类'],
                dropParams: [
                    ['光伏组件', '逆变器', '监控系统', '储能设备', '双向逆变器', '微电网控制器', '电力稳定系统', '取消筛选']
                ],   
                showDrorams: [],          			
				dropShow: false
            }
        },
		created() {
			document.title = "Microgrid微电网";
			this._getdata();
			this.$nextTick(() => {
				this._initScroll();
			})
		},
		methods: {
			catchQueryKeyword(queryKeyword) {
				this.filterKey = [''];
					this.tabParams = ['产品分类'];
				if(queryKeyword !== '') {
					axios({
						method:'get',
						url: apiUrl.catMicrogrid + '?model=' + queryKeyword
					}).then(response => {
						if (response.data.code === 'SUCCESS') {
							this.proList = [];
							if(response.data.data.list.length > 0){
	                            this.photourl(response.data.data.list);
	                        this.pageCount = Math.ceil(response.data.data.count / this.pageSize);            
	                            for (var i = 0; i < response.data.data.list.length; i++) {
	                            	this.proList.push(response.data.data.list[i]);
	                            }
	                        } else {
	                        	this.loadingDesc = '没有查询到任何数据！';
								this.loadingShowimg = false;
	                        }
						}
					});
				} else {
					
					this._getdata();
				}
			},
            photourl(argument) {
				let resdata = argument;
			    for (var i = resdata.length - 1; i >= 0; i--) {
			        let photo = resdata[i].photo;
			        photo = photo.split("|");
			        resdata[i].photo = photo[1]
			    }
			    return resdata;
			},
			_initScroll() {
				this.PartListScroll = new BScroll(this.$refs.partsw, {
					click: true
				});
				var _this = this;
				this.PartListScroll.on('touchend', function(position){
					if(position.y < (this.maxScrollY - 30)) {
				      _this.bottomTip = '加载中...';
				      setTimeout(function () {				
				      	if(_this.pageCount >= _this.pageIndex){
				      		_this.bottomTip = '查看更多';
				      		_this.pageIndex += 1;
				      		_this._getdata();
				      		// 加载更多后,重新计算滚动区域高度
				        	_this.PartListScroll.refresh();
				      	}        
				        _this.bottomTip = '暂无更多数据';
				      }, 1000);
				    }else{
				    	 _this.bottomTip = '查看更多';
				    }
				});				
			},
			_getdata() {
				axios({
					method:'get',
					url: apiUrl.catMicrogrid + '?productCategory=' + this.filterKey[0] + '&pageNo=' + this.pageIndex + '&pageSize='+ this.pageSize,
				}).then(response => {
					if (response.data.code === 'SUCCESS') {
						if(response.data.data.list.length > 0){
                            this.photourl(response.data.data.list)
                            this.pageCount = Math.ceil(response.data.data.count / this.pageSize);
                            if(response.data.data.count < this.pageSize) {
                                this.bottomTip = '暂无更多数据';
                            }
                            for (var i = 0; i < response.data.data.list.length; i++) {
                            	this.proList.push(response.data.data.list[i]);
                            }
                        } else {
                        	this.loadingDesc = '该栏目下没有数据！';
							this.loadingShowimg = false;
                        }
					}
				});
			},
			filtrate(item) {
                if(item !== '取消筛选') {
                    this.filterKey[this.isAcitve] = item;
                    this.tabParams[this.isAcitve] = item;
                } else {
                    this.filterKey[this.isAcitve] = '';
                    this.tabParams[this.isAcitve] = tempArr[this.isAcitve];
                }
                this.proList = [];
                this.pageIndex = 1;
                this._getdata();
                this.dropShow = false;
                this.isAcitve = null;
			},
			showDrop(index, isshow) {
				this.showDrorams = this.dropParams[index]
				this.dropShow = isshow;
				this.isAcitve = index;
            },
			loadImage() {
				this.PartListScroll.refresh();				
			}
		},
		components: {
			Loading,
			Search
		},
	}
</script>





